<template>
  <view class="home-container">
    <!-- 顶部标题栏 -->
    <view class="page-header">
      <view class="header-content">
        <view class="header-title">工单管理系统</view>
        <view class="header-subtitle">高效处理您的服务请求</view>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索工单编号或内容..." 
          v-model="searchKeyword"
          @confirm="handleSearch"
        />
        <button class="search-btn" @click="handleSearch">搜索</button>
      </view>
    </view>

    <!-- 功能导航 -->
    <view class="service-nav">
      <view class="nav-item" @click="handleNavClick('create')">
        <view class="nav-icon create-icon">
          <text class="icon-text">📋</text>
        </view>
        <text class="nav-text">创建工单</text>
      </view>
      
      <view class="nav-item" @click="handleNavClick('my-orders')">
        <view class="nav-icon orders-icon">
          <text class="icon-text">📝</text>
        </view>
        <text class="nav-text">我的工单</text>
      </view>
      
      <view class="nav-item" @click="handleNavClick('grab')">
        <view class="nav-icon grab-icon">
          <text class="icon-text">🎯</text>
        </view>
        <text class="nav-text">抢单大厅</text>
      </view>
      
      <view class="nav-item" @click="handleNavClick('more')">
        <view class="nav-icon more-icon">
          <text class="icon-text">⋯</text>
        </view>
        <text class="nav-text">更多服务</text>
      </view>
    </view>

    <!-- 轮播图区域 -->
    <view class="banner-section">
      <swiper 
        class="banner-swiper" 
        indicator-dots 
        autoplay 
        interval="5000" 
        duration="1000"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image class="banner-image" :src="item.image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 快捷操作 -->
    <view class="section-title">
      <text class="title-text">快捷操作</text>
    </view>
    
    <view class="quick-actions">
      <view class="action-card" @click="handleCreateOrder('repair')">
        <view class="action-icon repair-icon">
          <text class="icon-text">🔧</text>
        </view>
        <text class="action-text">设备维修</text>
      </view>
      
      <view class="action-card" @click="handleCreateOrder('install')">
        <view class="action-icon install-icon">
          <text class="icon-text">⚙️</text>
        </view>
        <text class="action-text">安装服务</text>
      </view>
      
      <view class="action-card" @click="handleCreateOrder('clean')">
        <view class="action-icon clean-icon">
          <text class="icon-text">🧹</text>
        </view>
        <text class="action-text">清洁服务</text>
      </view>
      
      <view class="action-card" @click="handleCreateOrder('other')">
        <view class="action-icon other-icon">
          <text class="icon-text">📋</text>
        </view>
        <text class="action-text">其他服务</text>
      </view>
    </view>

    <!-- 工单分类 -->
    <view class="section-title">
      <text class="title-text">工单分类</text>
    </view>
    
    <view class="categories-section">
      <view 
        class="category-card" 
        v-for="category in orderCategories" 
        :key="category.id"
        @click="() => handleSwitchOrderCategory(category.id)"
      >
        <view class="category-icon">
          <text class="icon-text" v-if="category.iconText">{{ category.iconText }}</text>
          <image class="icon-img" v-else :src="category.icon || '/static/images/category-default.png'" mode="aspectFit"></image>
        </view>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>

    <!-- 最新工单 -->
    <view class="section-title">
      <text class="title-text">最新工单</text>
      <text class="more-text" @click="handleViewOrders">查看更多 ></text>
    </view>
    
    <view class="orders-section">
      <view 
        class="order-card" 
        v-for="order in recentOrders" 
        :key="order.id"
        @click="() => handleViewOrderDetail(order.id)"
      >
        <view class="order-header">
          <text class="order-title">{{ order.title }}</text>
          <text class="order-status" :class="`status-${order.status}`">{{ getOrderStatusText(order.status) }}</text>
        </view>
        <view class="order-info">
          <text class="order-time">{{ order.time }}</text>
          <text class="order-price">¥{{ formatPrice(order.price) }}</text>
        </view>
      </view>
      
      <view class="empty-orders" v-if="recentOrders.length === 0">
        <text class="empty-text">暂无工单</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getWorkOrderListAPI } from '@/api/order.js'

const router = useRouter?.() || {
  push: (options) => {
    const url = typeof options === 'string' 
      ? options 
      : `${options.path}?${new URLSearchParams(options.query).toString()}`
    uni.navigateTo({ url })
  }
}

// 搜索关键词
const searchKeyword = ref('')

// 轮播图数据
const banners = ref([
  { image: '/static/images/banner1.jpg' },
  { image: '/static/images/banner2.jpg' },
  { image: '/static/images/banner3.jpg' }
])

// 工单分类
const orderCategories = ref([
  { id: 'all', name: '全部工单', iconText: '📋' },
  { id: '1', name: '紧急工单', iconText: '⚡' },
  { id: '2', name: '普通工单', iconText: '📝' },
  { id: '3', name: '维修类', iconText: '🔧' },
  { id: '4', name: '安装类', iconText: '⚙️' }
])

// 最新工单
const recentOrders = ref([])

// 加载最新工单数据
const loadRecentOrders = async () => {
  try {
    const res = await getWorkOrderListAPI()
    
    if (res && Array.isArray(res)) {
      recentOrders.value = res.slice(0, 5).map(item => ({
        id: item.id || '',
        title: item.type || item.title || '未知工单',
        status: item.status !== undefined ? item.status : 0,
        time: item.createTime || item.updateTime || '',
        price: item.price || 0
      }))
    }
  } catch (err) {
    console.error('获取最新工单异常:', err)
  }
}

// 格式化价格显示
const formatPrice = (price) => {
  if (price === undefined || price === null || isNaN(price)) {
    return '0.00';
  }
  return parseFloat(price).toFixed(2);
}

// 获取工单状态文本
const getOrderStatusText = (status) => {
  const map = {
    0: '待分配',
    1: '处理中',
    2: '已完成',
    3: '已取消',
    4: '已评价'
  }
  return map[status] || '未知状态'
}

// 页面加载时执行
onMounted(() => {
  loadRecentOrders()
})

// 事件处理函数
const handleSearch = () => {
  if (searchKeyword.value) {
    // 跳转到搜索结果页面
    uni.navigateTo({
      url: `/pages/search/search?keyword=${encodeURIComponent(searchKeyword.value)}`
    })
  }
}

const handleNavClick = (type) => {
  switch (type) {
    case 'create':
      uni.navigateTo({ url: '/pages/create-order/create-order' })
      break
    case 'my-orders':
      uni.switchTab({ url: '/pages/orders/orders' })
      break
    case 'grab':
      uni.switchTab({ url: '/pages/hall/hall' })
      break
    case 'more':
      uni.showToast({ title: '更多服务功能开发中', icon: 'none' })
      break
  }
}

const handleSwitchOrderCategory = (categoryId) => {
  // 跳转到工单页面并筛选对应分类
  uni.switchTab({ 
    url: `/pages/orders/orders?category=${categoryId}` 
  })
}

const handleViewOrders = () => {
  uni.switchTab({ url: '/pages/orders/orders' })
}

const handleViewOrderDetail = (orderId) => {
  uni.navigateTo({
    url: `/pages/order-detail/detail?id=${orderId}`
  })
}

const handleCreateOrder = (type) => {
  // 跳转到创建工单页面并传递工单类型
  uni.navigateTo({
    url: `/pages/create-order/create-order?type=${type}`
  })
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  padding-bottom: 20rpx;
}

.page-header {
  padding: 40rpx 30rpx 30rpx;
  background: linear-gradient(135deg, #1677ff 0%, #0e62d4 100%);
  color: white;
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.header-subtitle {
  font-size: 24rpx;
  opacity: 0.9;
}

.search-section {
  padding: 20rpx;
  margin-top: -20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  padding: 15rpx 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 15rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
}

.search-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: linear-gradient(135deg, #1677ff 0%, #0e62d4 100%);
  color: white;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin-left: 15rpx;
}

.service-nav {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  background-color: white;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  font-size: 40rpx;
  color: white;
}

.create-icon {
  background: linear-gradient(135deg, #1677ff 0%, #0e62d4 100%);
}

.orders-icon {
  background: linear-gradient(135deg, #ff9a2e 0%, #ff6b6b 100%);
}

.grab-icon {
  background: linear-gradient(135deg, #00c9a7 0%, #00a8ff 100%);
}

.more-icon {
  background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%);
}

.nav-text {
  font-size: 24rpx;
  color: #333;
}

.banner-section {
  padding: 0 20rpx 20rpx;
}

.banner-swiper {
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.more-text {
  font-size: 24rpx;
  color: #1677ff;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 0 20rpx 20rpx;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 20rpx;
  padding: 20rpx 10rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  font-size: 40rpx;
  color: white;
}

.repair-icon {
  background: linear-gradient(135deg, #1677ff 0%, #0e62d4 100%);
}

.install-icon {
  background: linear-gradient(135deg, #ff9a2e 0%, #ff6b6b 100%);
}

.clean-icon {
  background: linear-gradient(135deg, #00c9a7 0%, #00a8ff 100%);
}

.other-icon {
  background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%);
}

.action-text {
  font-size: 22rpx;
  color: #333;
  text-align: center;
}

.categories-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 0 20rpx 20rpx;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 20rpx;
  padding: 20rpx 10rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  background: linear-gradient(135deg, #1677ff 0%, #0e62d4 100%);
  font-size: 40rpx;
  color: white;
}

.icon-img {
  width: 40rpx;
  height: 40rpx;
}

.category-name {
  font-size: 22rpx;
  color: #333;
  text-align: center;
}

.orders-section {
  padding: 0 20rpx;
}

.order-card {
  background-color: white;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.order-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.order-status {
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.status-0 {
  background-color: #fff7e6;
  color: #ff9a2e;
}

.status-1 {
  background-color: #e8f3ff;
  color: #1890ff;
}

.status-2 {
  background-color: #e6ffed;
  color: #00b42a;
}

.status-3 {
  background-color: #f0f0f0;
  color: #999;
}

.status-4 {
  background-color: #f9f0ff;
  color: #722ed1;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-time {
  font-size: 22rpx;
  color: #999;
}

.order-price {
  font-size: 28rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.empty-orders {
  background-color: white;
  border-radius: 20rpx;
  padding: 60rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>